<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Auther</th>
        </tr>
      </thead>
      <tbody>
      <tr v-for="book in books" :key="book.id">
<!--        {{index}}-{{book.name}}-{{book.author}}-->
        <td>{{ book.id }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.author }}</td>
      </tr>

<!--        <tr v-for="user in users" :key="user.id">-->
<!--          <td>{{ user.id }}</td>-->
<!--          <td>{{ user.name }}</td>-->
<!--          <td>{{ user.age }}</td>-->
<!--        </tr>-->

      </tbody>
      <br>
    <button type="跳转到getAllbooks" @click="goToAbout()">返回新增书籍</button>
    <br>
    </table>
  </div>
</template>

<script>
import {getBooks, postBook,getAllBook} from '../api/api.js'
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John Doe', age: 30 },
        { id: 2, name: 'Jane Smith', age: 25 },
        // 更多用户数据...
      ],
      books: [
        {id:1, name: 'test', author: 't'},
        {id:2, name: 'test2', author: 't2'}
      ],
      inputBook: {
        "name": "",
        "author": "",
      }
    };
  },
  methods: {
    loadBooks () {
      getAllBook().then(response => {
        console.log("1111")
        console.log(response.data)
        for(let i=0; i<response.data.length; ++i) {
          console.log(response.data[i]);
        }
        this.books = response.data
      })

      // getBooks().then(response => {
      //   console.log("1111")
      //   console.log(response.data)
      //   for(let i=0; i<response.data.length; ++i) {
      //     console.log(response.data[i]);
      //   }
      //   this.books = response.data
      // })

    }, // load books list when visit the page

    goToAbout() {
      // 使用编程方式进行路由跳转
      this.$router.push('/');
    },

    bookSubmit () {
      postBook(this.inputBook.name, this.inputBook.author).then(response => {
        console.log(response)
        this.loadBooks()
      })
    }, // add a book to backend when click the button
  },
  created: function () {
    this.loadBooks()
  }
};
</script>

<style>
/* 可以添加一些样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>
